<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas {
            border: 1px solid;
        }
    </style>
</head>

<body>
    <canvas width="500" height="500"></canvas>

    <script>
        const cvs = document.querySelector('canvas');// 获取 canvas 元素
        let ctx = cvs.getContext("2d"); // 获取画笔

        // ctx.moveTo(50, 250); // 起始点
        // ctx.lineTo(450, 250); // 终点
        // ctx.stroke(); // 描绘

        // 三角
        // ctx.beginPath(); // 重新开始路径
        // ctx.moveTo(250, 50); // a
        // ctx.lineTo(450, 150); // b
        // ctx.lineTo(50, 150); // c
        // // ctx.lineTo(250, 50); // 回到 a 点
        // ctx.closePath(); // 回到 a 点

        // ctx.stroke();

        // 矩形
        // ctx.beginPath(); // 重新开始路径

        // ctx.moveTo(150, 150);
        // ctx.lineTo(350, 150);
        // ctx.lineTo(350, 350);

        // // ctx.lineTo(150, 150); // 回到原点
        // ctx.closePath();
        // // ctx.stroke();

        // ctx.fill();


        // ctx.fillRect(0, 0, 100, 200);
        // ctx.clearRect(0, 0, 500, 500);
        // ctx.clearRect(0, 0, cvs.width, cvs.height);

        // x, y, r, start, end, boolean
        // ctx.arc(250, 250, 100, 0, Math.PI / 180 * 90, false);
        // ctx.stroke();

        // let i = 0;
        // setInterval(function () {
        //     ctx.save();
        //     ctx.clearRect(0, 0, cvs.width, cvs.height); // 擦除
        //     ctx.translate(250, 250); // 平移
        //     ctx.rotate(Math.PI / 180 * i++); // 旋转
        //     if (i == 360) {
        //         i = 0;
        //     }
        //     ctx.fillRect(0, 0, 100, 200);
        //     ctx.restore();
        // }, 20);



    </script>
</body>

</html>